<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>与我分享</title>
			<link rel="stylesheet" href="js/layui/css/layui.css">
			<link rel="stylesheet" href="css/layui-theme-custom.css" />
			<link rel="stylesheet" href="css/mytest.css" />
			<link rel="stylesheet" href="css/note_list.css" />
			<script type="text/javascript" src="js/vue.min.js"></script>
			<script type="text/javascript" src="js/axios.min.js"></script>
	</head>

	<body>
			<div class="body_left">
			<div class="right_top">
				<i class="iconfont icon-fanhui" style="font-size: 34px ;line-height: 56px;float: left; margin-left: 20px; color: #DFE2E8;"></i>
				<div class="search layui-btn-radius">
					<i class="iconfont icon-sousuo" style="float: left;margin-left: 5px;color: #DFE2E8;"></i>
					<input type="text" name="title" required lay-verify="required" placeholder="搜索..." autocomplete="off" class="searchinput">
				</div>
				<i class="iconfont icon-icon-" style="float: right; margin-right: 20px;color: #DFE2E8;"></i>
			</div>
		<ul id="notes">
			<li v-for="(note,index) in info.data" :id="forId(index)" class="test1">
				<div class="welcome">
					<div class="test" :id="forDivId(index)" hidden="hidden">
						<ul>
							<li>{{note.id}}</li>
							<li>加星</li>
							<li>置顶</li>
							<li>复制</li>
							<li>删除</li>
						</ul>
					</div>
					<div class="noteid" hidden="hidden">{{note.id}}</div>
					<div style="height: 20px;"></div>
					<div class="Ntop"><img class="noteimg" :src="note.icon" width="16px" height="16px" /><span class="Ntitle">{{note.notesName}}</span>
						<div class="noteType" hidden="hidden">{{note.type}}</div>
						<span class="images" :value="note.id">
											<img :src="'img/star'+note.favorite+'.png'"
												 onMouseOver="this.src='img/star2.png'"
												 onclick="change(this)"
												 :onMouseOut="'mouse('+note.favorite+')'" height="14px" width="14px"
												 class="star"/>
											<img src= "img/share1.png" onMouseOver="this.src='img/share2.png'" onMouseOut="this.src='img/share1.png'" height="26px" width="26px" class="share"/>
											<img src="img/down1.png" v-if="note.type=='0'" onMouseOver="this.src='img/down2.png'" onMouseOut="this.src='img/down1.png'" height="19px" width="19px" class="down"/>
											<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'" onMouseOut="this.src='img/delete1.png'" height="21px" width="21px" class="delete"/>
										</span>
					</div>
					<div class="content" v-if="note.content!=null">{{note.content}}</div>
					<div class="Nbottom"><span>{{note.updateTime}}</span><span class="kb">{{note.size}}KB</span></div>
					<span hidden="hidden" id="nodeId">{{note.id}}</span>
					<span hidden="hidden" id="userId">{{note.userId}}</span>
				</div>
			</li>

		</ul>
		</div>
		<script src="js/layui/layui.js"></script>
		<script src="js/jquery-3.4.1.js"></script>
		<script>
			//JavaScript代码区域
			layui.use(['element', 'layer'],
				function() {
					var element = layui.element;
					var $ = layui.$;
					var layer = layui.layer; /*点击事件*/
					
					var userid = sessionStorage.getItem("accessToken");
					console.log(userid)

					/*点击事件*/
					$('body').on('click', '.welcome', function(e) {

						var noteName = $(this).find('.Ntitle').text();//
						var content = $(this).find('.content').text();//点击的内容
						console.log(noteName);
						console.log(content);
						$('.body_right').load('recycle-area.html');
	
					});

					/*笔记列表*/
					new Vue({
						el: '#notes', //绑定
						data() { //数据
							return {
								info: []
							}
						},
						mounted() { //直接执行
							axios.get('http://localhost:9097/notes/getMyshare', {
								params: {
									userId: sessionStorage.getItem("accessToken"),
									token: sessionStorage.getItem("accessToken")
								}
							}).then(response => (this.info = response))
								.catch(function(error) { // 请求失败处理
									console.log(error);
								});
						},
						methods: {
							forId: function(index) {
								return "welcome" + index
							},
							forDivId: function(index) {
								return "rightClick" + index
							},
						}
					});
					
				});

			//加星
			function mouse(d) {
				if (d==1){
					this.src="img/star1.png"
				}else {
					this.src="img/star2.png"
				}
			}

			var toggle = true;

			function change(d) {
				console.log("asd")
				var id = $(d).parent().attr("value");
				if (toggle) {
					$('.star').attr('src', 'img/star2.png');
					$('.star').removeAttr("onMouseOut");
					$('.star').unbind();
					toggle = false;

					$.ajax({
						type: 'get',
						async: false, //同步或异步,
						contentType: 'application/json',
						url: 'http://localhost:9097/notes/setfavorite?id='+id,
						success: function(d) {},

					})
				} else {
					$('.star').mouseout(function () {
						$('.star').attr('src', 'img/star1.png');
					})
					toggle = true;
					$.ajax({
						type: 'get',
						async: false, //同步或异步,
						contentType: 'application/json',
						url: 'http://localhost:9097/notes/nofavorite?id='+id,
						success: function(d) {},
					})

				}
			}

		</script>
	</body>

</html>